<template>
  <nut-popup :visible="visible" position="center" @click-overlay="handleClose">
    <view class="dispute-modal bg-white rounded-[24rpx] p-[40rpx] w-[540rpx]">
      <!-- 关闭按钮 -->
      <view class="close-btn absolute top-[20rpx] right-[20rpx] z-[10]" @click="handleClose">
        <IconFont name="close" size="20" class="text-[#999999]" />
      </view>

      <!-- 警告图标 -->
      <view class="warning-icon flex justify-center mb-[30rpx]">
        <view class="w-[80rpx] h-[80rpx] bg-[#FFF2F0] rounded-full flex items-center justify-center">
          <IconFont name="issue" size="40" class="text-[#FF4D4F]" />
        </view>
      </view>

      <!-- 标题 -->
      <view class="modal-title text-center mb-[30rpx]">
        <text class="text-[36rpx] font-bold text-[#FF4D4F]">{{ title }}</text>
      </view>

      <!-- 说明文字 -->
      <view class="modal-description mb-[30rpx]">
        <text class="text-[28rpx] text-[#666666] leading-[40rpx]">{{ description }}</text>
      </view>

      <!-- 操作列表 -->
      <view class="action-list bg-[#FFF2F0] rounded-[16rpx] p-[30rpx] mb-[40rpx]">
        <view class="action-item flex items-center mb-[20rpx]" v-for="(action, index) in actions" :key="index">
          <!-- <view class="action-icon mr-[20rpx]">
            <IconFont 
              font-class-name="iconfont" 
              class-prefix="icon" 
              :name="action.icon" 
              size="24" 
              class="text-[#FF4D4F]" 
            />
          </view> -->
          <text class="text-[28rpx] text-[#333333]">{{ action.text }}</text>
        </view>
      </view>

      <!-- 额外说明 -->
      <view class="additional-info mb-[40rpx]" v-if="additionalInfo">
        <text class="text-[26rpx] text-[#666666] leading-[36rpx]">{{ additionalInfo }}</text>
      </view>

      <!-- 确认按钮 -->
      <view class="modal-actions flex-center">
        <nut-button 
          type="primary" 
          class="w-full"
          :loading="loading"
          @click="handleConfirm"
        >
          {{ confirmText }}
        </nut-button>
      </view>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro';

interface ActionItem {
  icon: string;
  text: string;
}

interface Props {
  visible: boolean;
  title?: string;
  description?: string;
  actions?: ActionItem[];
  additionalInfo?: string;
  confirmText?: string;
  loading?: boolean;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
  (e: 'confirm'): void;
  (e: 'close'): void;
}

const props = withDefaults(defineProps<Props>(), {
  title: '异议申请已提交',
  description: '我们已收到您的异议申请，平台将立即采取以下措施：',
  actions: () => [
    { icon: 'lock', text: '冻结当前阶段交易资金' },
    { icon: 'service', text: '客服将在24小时内联系双方' },
    { icon: 'clock', text: '纠纷处理期间暂停任务进度' }
  ],
  additionalInfo: '请准备好相关沟通记录作为证据，平台客服会通过注册手机号与您联系。',
  confirmText: '确认',
  loading: false
});

const emit = defineEmits<Emits>();

const handleClose = () => {
  emit('update:visible', false);
  emit('close');
};

const handleConfirm = () => {
  emit('confirm');
};
</script>

<style scoped>
.dispute-modal {
  position: relative;
}

.close-btn {
  cursor: pointer;
}

.action-item:last-child {
  margin-bottom: 0;
}
</style>
